<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <h:head>
        <title>#{bundle.loanpmt}</title>
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
    </h:head>
    <h:body>
        <ui:composition>
            <h:form>
               <script type="text/javascript">  
                   var doInitForm=false;
                   var tofocus;
                   
                   function changeFocus(nextfcs) {tofocus=nextfcs;}
                   function setDoInitForm(st) {doInitForm=st;}
                   function focusState(xhr, status, args) {  
                       if(args.validationFailed || !args.success) {}
                       else {
                           var fokus = document.getElementById(tofocus);
                           if (fokus != null) fokus.focus();
                       }
                       return false;
                   }
                   
                   function handleCompleteSaving(xhr, status, args) {  
                        if(args.validationFailed || !args.success) {
                        }else setTimeout(function() {if (doInitForm==true) btnNewLoanpmt.jq.click();}, 3000);
                    }
                    
                    function customRK(e, id, nextfcs) {
                       var code = (e.keyCode ? e.keyCode : e.which);
                       if(code==13) {
                            tofocus = null;
                            if (id=='loanpmtLoanNo') {
                                rcloanpmtGetLoan();
                                tofocus = nextfcs;
                            } 
                            else if (id=='loanpmtSavingNo') rcloanpmtGetSaving();
                            
                            e.preventDefault ? e.preventDefault() : e.returnValue = false;
                            e.stopPropagation();
                       }
                    }
                    
                </script>  
                
                <p:toolbar >
                    <p:toolbarGroup align="left">
                        <p:commandButton value="#{bundle.btnNew}" icon="ui-icon-document"
                                         action="#{loanpmtBean.newData()}" process="@this" update="displayLoanpmt, btnSaveLoanpmt" 
                                         widgetVar="btnNewLoanpmt" oncomplete="setDoInitForm(false);"
                                         rendered="#{menuBean.cekButtonAccess(305,'INS;')}">
                            <pe:resetEditableValues for="displayLoan"/>  
                        </p:commandButton>
                                                    
                        <p:commandButton value="#{bundle.btnSave}" icon="ui-icon-disk"
                                         action="#{loanpmtBean.save()}" id="btnSaveLoanpmt" 
                                         rendered="#{menuBean.cekButtonAccess(305,'INS;')}"
                                         oncomplete="setDoInitForm(true); handleCompleteSaving(xhr, status, args);"
                                         update="displayLoanpmt, @this" disabled="#{!loanpmtBean.editMode}" >
                        </p:commandButton> 
                    </p:toolbarGroup>
                    
                    <p:toolbarGroup align="right">
                        <p:commandButton id="doNothingLoanpmt" type="button" value="" style="width: 0px; height: 0px;"/> 
                         <p:defaultCommand target="doNothingLoanpmt"/> 
                    </p:toolbarGroup>
                </p:toolbar>
                
                <p:remoteCommand name="rcloanpmtGetLoan" actionListener="#{loanpmtBean.getLoan('null')}" process="loanpmtLoanNo @this" 
                                 update="displayLoanpmt loanpmtLoanIdHidden" oncomplete="focusState(xhr, status, args);"/>
                <p:remoteCommand name="rcloanpmtGetSaving" actionListener="#{loanpmtBean.getSaving('null')}" process="loanpmtSavingNo @this" 
                                 update="loanpmtSavingNo" />
                
                <h:panelGrid id="displayLoanpmt" styleClass="addELIT">
                    <h:panelGrid columns="2" rowClasses="panelGridId" columnClasses="panelGridId, panelGridId" >
                        <p:panel header="#{bundle.loanpmtLedgend}">
                            <h:panelGrid columns="3" cellpadding="0" cellspacing="5">
                                <h:outputLabel value= "#{bundle.loanpmtDate}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.paymentDate}" />
                                
                                <h:outputLabel value= "#{bundle.loanpmtNo}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.paymentNo}" />
                                
                                <p:outputLabel value= "#{bundle.loanNo}" for="loanpmtLoanNo"/><h:outputLabel value= ":" />
                                <h:panelGrid columns="2" cellpadding="0" cellspacing="0">
                                    <p:inputText value="#{loanpmtBean.loanpmt.loan.loanNo}" style="width: 168px;" 
                                                onkeydown="customRK(event, 'loanpmtLoanNo', '#{utilityBean.findClientId('loanpmtAmount')}')" disabled="#{!loanpmtBean.editMode}"
                                                id="loanpmtLoanNo" label="#{bundle.loanNo}" 
                                                required="true" requiredMessage="#{bundle.loanNo} #{bundle.requiredInput}" />
                                    <p:commandButton icon="ui-icon-search" iconPos="center" styleClass="btnSmall"
                                                     update=":#{utilityBean.findClientId('displayLoanpmtLookup')}" onclick="changeFocus('#{utilityBean.findClientId('loanpmtAmount')}');"
                                        process="@this" immediate="true" oncomplete="dlgLoanpmtLookupLoan.show();" disabled="#{!loanpmtBean.editMode}">
                                        <f:setPropertyActionListener target="#{loanpmtBean.showLookup}" value="#{true}" />
                                    </p:commandButton>
                                </h:panelGrid>
                                
                                <h:outputLabel value= "Angsuran Pokok" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.principalAmount}" styleClass="numPos" >
                                    <f:convertNumber groupingUsed="true" />
                                </h:outputText> 
                                
                                <h:outputLabel value= "Bunga" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.interestAmount}" styleClass="numPos">
                                    <f:convertNumber groupingUsed="true" />
                                </h:outputText> 
                                                                
                                <p:outputLabel value= "#{bundle.amount}" for="loanpmtAmount"  /><h:outputLabel value= ":" />
                                <pe:inputNumber decimalSeparator="." thousandSeparator="," maxValue="99999999999999999999.99" minValue="0" 
                                    value="#{loanpmtBean.loanpmt.amount}" style="width: 192px; text-align: right;" 
                                    requiredMessage="#{bundle.amount} #{bundle.requiredInput}" disabled="#{!loanpmtBean.editMode}"
                                    required="true" id="loanpmtAmount" />

                                <h:outputLabel value= "#{bundle.bank}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{loanpmtBean.loanpmt.bankId}" style="width: 200px;" 
                                                    requiredMessage="#{bundle.bank} #{bundle.requiredInput}" 
                                                    id="loanpmtBank" disabled="#{!loanpmtBean.editMode}">
                                        <f:selectItem itemLabel="#{bundle.Select} #{bundle.bank}" itemValue="-1" />
                                        <f:selectItems value="#{loanpmtBean.availableBank}" />
                                        <p:ajax update="loanpmtSavingNo, loanpmtSavingCif, loanpmtSavingOwner, loanpmtSavingBalance" process="@this" listener="#{loanpmtBean.handleBankSelected}"/>  
                                </p:selectOneMenu>

                                <h:outputLabel value= "#{bundle.savingNo}" /><h:outputLabel value= ":" />
                                <h:panelGrid columns="2" cellpadding="0" cellspacing="0">
                                    <p:inputText value="#{loanpmtBean.savingNo}" style="width: 168px;" 
                                                onkeydown="customRK(event, 'loanpmtSavingNo',null)" disabled="#{!loanpmtBean.editMode}"
                                                id="loanpmtSavingNo" label="#{bundle.savingNo}" >
                                        <p:ajax update="loanpmtBank, loanpmtSavingCif, loanpmtSavingOwner, loanpmtSavingBalance" process="@this" />  
                                    </p:inputText>
                                    <p:commandButton icon="ui-icon-search" iconPos="center" styleClass="btnSmall" 
                                                     update="loanpmtBank, loanpmtSavingNo, loanpmtSavingCif, loanpmtSavingOwner, loanpmtSavingBalance" 
                                        process="@this" immediate="true" oncomplete="dlgLoanpmtLookupSav.show();" disabled="#{!loanpmtBean.editMode}">
                                        <f:setPropertyActionListener target="#{loanpmtBean.showLookup}" value="#{true}" />
                                    </p:commandButton>
                                </h:panelGrid>
                                                                
                                <h:outputLabel value= "#{bundle.ownerAccnt}" /><h:outputLabel value= ":"/>
                                <h:outputText value="#{loanpmtBean.savingOwner}" id="loanpmtSavingOwner"/>

                                <h:outputLabel value= "#{bundle.cif}" /><h:outputLabel value= ":" />
                                <h:outputText rendered="true" value="#{loanpmtBean.cif}" id="loanpmtSavingCif"/>

                                <h:outputLabel value= "#{bundle.balance}" /><h:outputLabel value= ":" />
                                <h:outputText rendered="true" value="#{loanpmtBean.saldo}" id="loanpmtSavingBalance" styleClass="numPos">
                                            <f:convertNumber groupingUsed="true" />
                                </h:outputText>
                                                                
                            </h:panelGrid>
                                                         
                            <h:panelGrid>
                                <h:inputHidden value="#{loanpmtBean.loanpmt.loan.loanId}" required="true" id="loanpmtLoanIdHidden"
                                               requiredMessage="#{bundle.loanNo} #{bundle.dataNotFound}" />
                            </h:panelGrid>    
                        </p:panel>
                        
                        <p:outputPanel autoUpdate="true">
                        <p:panel header="#{bundle.cusledgen}">
                            <h:panelGrid columns="3" cellpadding="0" cellspacing="10" style="width: 100%" >
                                <h:outputLabel value= "#{bundle.cif}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.loan.customer.cif}" />

                                <h:outputLabel value= "#{bundle.globalName}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.loan.customer.customerName}" />

                                <h:outputLabel value= "#{bundle.aliasName}" /><h:outputLabel value= ":" />
                                <h:outputText rendered="true" value="#{loanpmtBean.loanpmt.loan.customer.aliasName}" />

                                <h:outputLabel value= "#{bundle.npwp}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.loan.customer.npwp}" />

                                <h:outputLabel style="padding: 0 15px 0 0;" value= "#{bundle.officePhone}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.loan.customer.cusper.officePhone}"/>

                                <h:outputLabel value= "#{bundle.phone}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.loan.customer.phone}"/>

                                <h:outputLabel value= "#{bundle.mobilePhone}" /><h:outputLabel value= ":" />
                                <h:outputText value="#{loanpmtBean.loanpmt.loan.customer.mobilePhone}"/>
                                
                                <h:outputLabel value= "#{bundle.specimen}" /><h:outputLabel value=":"/>
                                <p:graphicImage  value="/upload/personal/#{loanpmtBean.loanpmt.loan.customer.specimen}" />
                                
                            </h:panelGrid>
                        </p:panel>
                        </p:outputPanel>
                    </h:panelGrid>
                </h:panelGrid>
            </h:form> 
            
            <!-- LOOK UP saving -->
            <p:dialog header="#{bundle.Select} #{bundle.loanNo}" widgetVar="dlgLoanpmtLookupLoan" closable="true" dynamic="true" appendToBody="true" modal="true" >
                    <p:ajax listener="#{loanpmtBean.handleCloseLookup}" />
                    <h:form>
                        <h:panelGrid id="displayLoanpmtLookup" rendered="#{loanpmtBean.showLookup==true}">
                            <ui:include src="../loan/searchLoan.xhtml" >
                                <ui:param name="lookupLoanComponenId" value="loanpmt" />
                                <ui:param name="loanApprovalUid" value="#{1}" />
                                <ui:param name="loanStatusLoan" value="#{3}" />
                            </ui:include> 

                            <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR" >
                                <f:facet name="footer">
                                    <p:commandButton value="#{bundle.btnOK}" icon="ui-icon-disk" immediate="true" 
                                                    process="@this" update=":#{utilityBean.findClientId('displayLoanpmt')} :#{utilityBean.findClientId('loanpmtLoanIdHidden')}"
                                                    action="#{loanpmtBean.getLoan(searchLoanBean.selectedData.loanNo)}" 
                                                    oncomplete="dlgLoanpmtLookupLoan.hide(); focusState(xhr, status, args);" />

                                    <p:commandButton value="#{bundle.btnClose}" oncomplete="dlgLoanpmtLookupLoan.hide()" immediate="true" icon="ui-icon-document" process="@this" />
                                </f:facet>
                            </h:panelGrid>
                        </h:panelGrid>
                    </h:form>    
                </p:dialog>
         
            <p:dialog header="#{bundle.Select} #{bundle.savingNo}" widgetVar="dlgLoanpmtLookupSav" closable="true" dynamic="true" appendToBody="true" modal="true" >
                    <p:ajax listener="#{loanpmtBean.handleCloseLookup}" />
                    <h:form>
                        <h:panelGrid id="displayLoanpmtLookupSav" rendered="#{loanpmtBean.showLookup==true}">
                            <ui:include src="../saving/searchSaving.xhtml" >
                                <ui:param name="lookupSavComponenId" value="loanpmt" />
                            </ui:include> 

                            <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR" >
                                <f:facet name="footer">
                                    <p:commandButton value="#{bundle.btnOK}" icon="ui-icon-disk" immediate="true" 
                                                    process="@this" update=":#{utilityBean.findClientId('loanpmtBank')}, 
                                                    :#{utilityBean.findClientId('loanpmtSavingNo')} 
                                                    :#{utilityBean.findClientId('loanpmtSavingCif')} 
                                                    :#{utilityBean.findClientId('loanpmtSavingOwner')} 
                                                    :#{utilityBean.findClientId('loanpmtSavingBalance')}"
                                                    action="#{loanpmtBean.getSaving(searchSavingBean.selectedData.accountNo)}" 
                                                    oncomplete="dlgLoanpmtLookupSav.hide();" />

                                    <p:commandButton value="#{bundle.btnClose}" oncomplete="dlgLoanpmtLookupSav.hide()" immediate="true" icon="ui-icon-document" process="@this" />
                                </f:facet>
                            </h:panelGrid>
                        </h:panelGrid>
                    </h:form>    
                </p:dialog>
            
        </ui:composition>        
    </h:body>
</html>

